const { src, dest, parallel, series, watch } = require("gulp");
// 删除
const del = require("del");
// 样式组件
const sass = require("gulp-sass")(require("sass"));
// 热更新
const browserSync = require("browser-sync");
const bs = browserSync.create();
// gulp组件引入
const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins({
  postRequireTransforms: {
    sass: () => {
      return sass;
    },
  },
});
// 基础配置参数
const data = require('./configuration')
// 样式编译
// const  sass = require('gulp-sass')(require('sass'));
// 脚本编译
// const plugins.babel = require('gulp-babel')
// 模板
// const plugins.swig = require('gulp-swig')
// 图片、svg压缩
// const plugins.imagemin = require('gulp-imagemin');

// 清空
const clean = () => {
  return del(["dist", "temp"]);
};
// 样式 编译完毕之后 放置于中间文件夹中
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass())
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// 脚本 编译完毕之后 放置于中间文件夹中
const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// 页面 编译完毕之后 放置于中间文件夹中
const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// 公用文件 - 图片
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
// 公用文件 - 字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
// 额外任务 编译 public阶段文件内容
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};
// 启动服务
const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 2080,
    // open: false, // 是否自动打开浏览器
    // files: 'dist/**',
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};
const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      // html js css
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true, // 行内样式压缩
            minifyJS: true,
          })
        )
      )
      .pipe(dest("dist"))
  );
};

const compile = parallel(style, script, page);
// 上线任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);
// 开发阶段
const develop = series(compile, serve);
module.exports = {
  clean,
  build,
  develop
};
